<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
  <script>
    //拦截请求的
    axios.interceptors.request.use(function (config) {
      console.log("请求发出前，执行的方法")

      const token = localStorage.getItem("token")
      config.headers.Authorization = `Bearer ${token}`
      return config;

    }, function (error) {
      return Promise.reject(error);
    });


    //拦截响应的
    axios.interceptors.response.use(function (response) {
      console.log("请求成功后第一个调用的方法")
      // console.log(response.headers) //response里面的属性
      const { authorization } = response.headers
      //存储  判断authorization为真的话，就进行存储
      authorization && localStorage.setItem("token", authorization)
      return response;
    }, function (error) {
      if (error.response.status === 401) {
        localStorage.removeItem("token")
        location.href = "/login"
      }
      return Promise.reject(error);

    });
  </script>
</head>

<body>
  <h1>创作者中心管理页</h1>
  <div class="userInfo">

  </div>


  <script>
    let data  = localStorage.getItem('userinfo')
    data = JSON.parse(data)
    console.log(data);
    document.querySelector(".userInfo").innerHTML = `<h1>id:${data[0]._id}</h1>
    <h1>name:${data[0].username}</h1>
   `
  </script>
</body>

</html>